<template>
	<!-- 返回上一页 -->
	<go-back :title="'快速搜索'"></go-back>
	<view class="my-search">
		<view class="header">
			<view class="search">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear">
				</uni-search-bar>
				<view class="search-result">
					<text class="search-result-text">当前输入为：{{ searchValue }}</text>
				</view>
			</view>
			<view class="hot-recommend">
				<h3>热门推荐</h3>
				<view class="product-list">
					<view class="product-box" v-for="item in products" :key="item.id">
						<image class="product-img" :src="item.image" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-name">{{ item.name }}</text>
							<view class="product-price">
								<text class="current-price">￥{{ item.price }}</text>
								<text class="original-price">￥{{ item.originalPrice }}</text>
							</view>
							<view class="cart-icon">
								<image class="img" src="../../static/assets/cart-add.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import GoBack from '../../components/GoBack/GoBack.vue'
	export default {
		components: {
			GoBack
		},
		data() {
			return {
				// 定义输入框的值
				searchValue: '',
				products: [{
					id: 1,
					image: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/610259/2024/0804/56/76e14234-b882-4930-9b3a-475da8938217_262x262_90.jpg",
					name: "典雅范儿！小香风短外套女秋冬韩系高级感小众名媛气质chic夹克潮",
					price: "55",
					originalPrice: "66"
				}, {
					id: 2,
					image: "https://img.alicdn.com/bao/uploaded/i4/2200580775825/O1CN01k1cD311stu5d9GWNl_!!2200580775825.jpg_.webp",
					name: "xxx",
					price: "55",
					originalPrice: "66"
				}, {
					id: 3,
					image: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/655481/2024/1016/158/5c4e5651-cfbb-468a-b4e3-0b5c81b13f46_262x262_90.jpg",
					name: "xxx",
					price: "55",
					originalPrice: "66"
				}, {
					id: 4,
					image: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/08/09/51/0436ffc4-902d-4e00-81be-80b0b8ced3f2_262x262_90.jpg",
					name: "xxx",
					price: "55",
					originalPrice: "66"
				}, {
					id: 5,
					image: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/643496/2024/0904/28/59546cc0-1a06-4380-a141-83a1f3ac7d9f_262x262_90.jpg",
					name: "针织连衣裙女2023年新款高级感穿搭长袖小个子气质秋冬法式毛衣裙",
					price: "55",
					originalPrice: "66"
				}, {
					id: 6,
					image: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618791/2024/0422/157/beda7850-cfd8-4032-a1b0-0e2db647e803_262x262_90.jpg",
					name: "xxx",
					price: "55",
					originalPrice: "66"
				}, ],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';



	.my-search {
		overflow: hidden;

		.header {
			padding: $pad;
			margin-top: $marTop;

			.hot-recommend {
				// margin-top: 20rpx;

				h3 {
					padding: 10rpx;
					color: $color;
				}

				.product-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 10rpx;
				}

				.product-box {
					width: 48%; // Adjust the width to fit two columns
					background-color: #fff;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
					overflow: hidden;
				}

				.product-img {
					width: 100%;
					height: 200rpx; // Set a fixed height or use auto for adaptive
					object-fit: cover;
				}

				.product-info {
					padding: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
				}

				.product-name {
					font-size: 28rpx;
					color: #333;
					overflow: hidden;
					/* 超出隐藏 */
					display: -webkit-box;
					/* 设置为 flexbox */
					-webkit-box-orient: vertical;
					/* 垂直显示 */
					-webkit-line-clamp: 1;
					/* 显示的行数 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.product-price {
					display: flex;
					align-items: center;
				}

				.current-price {
					font-size: 30rpx;
					color: #e93c3c;
					margin-right: 10rpx;
				}

				.original-price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}

				.cart-icon {
					width: 60rpx;
					height: 60rpx;
					align-self: flex-end;
					background: $bgBottom;
					border-radius: 50%;
					text-align: center;
					box-shadow: $boxShadow;

					.img {
						width: 35rpx;
						height: 35rpx;
						margin-top: 10rpx;
					}
				}

			}

		}

		.search-result {
			padding-top: 10px;
			padding-bottom: 20px;
			text-align: center;
		}

		.search-result-text {
			text-align: center;
			font-size: 14px;
			color: #666;
		}

		.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 0px;
		}

		.uni-mt-10 {
			margin-top: 10px;
		}
	}
</style>